<template>
  <div class="container">
    <el-form :model="siginForm" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.sigin.signcode')">
            <el-input maxlength="20" show-word-limit v-model="siginForm.signcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.sigin.noticenumber')">
            <el-input maxlength="20" show-word-limit v-model="siginForm.noticenumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.sigin.ordernumber')">
            <el-input maxlength="20" show-word-limit v-model="siginForm.ordernumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.suppliername')">
            <el-input maxlength="20" show-word-limit v-model="siginForm.suppliername"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SKU">
            <el-input maxlength="20" show-word-limit v-model="siginForm.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SupplierCode">
            <el-input maxlength="20" show-word-limit v-model="siginForm.suppliercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button
            type="primary"
            @click="signingNoticePopupVisible=true"
            v-if="hasPermission('table-noticenumber')"
          >{{$t('m.sigin.sigin')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
      v-loading="tableLoading">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column type="index" :label="$t('m.index')" width="50" align="center"></el-table-column>
      <el-table-column :label="$t('m.sigin.signcode')" align="center">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-signcode')">
            <el-button @click.stop="getSigningData(scope.row.signid)" type="text">{{scope.row.signcode}}</el-button>
          </template>
          <template slot-scope="scope" v-else>{{scope.row.signcode}}</template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('m.sigin.noticenumber')" align="center">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-noticenumber')">
            <el-button
              @click.stop="getNoticeData(scope.row.noticenumber)"
              type="text"
            >{{scope.row.noticenumber}}</el-button>
          </template>
          <template slot-scope="scope" v-else>{{scope.row.noticenumber}}</template>
        </template>
      </el-table-column>
      <el-table-column prop="suppliername" :label="$t('m.in.suppliername')" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="typename" :label="$t('m.sigin.typename')" align="center">
        <!-- <template slot-scope="scope">
          1 订单到货 2 第三方到货 3 退货到货 4其它
          <span v-if="scope.row.typeid==1">{{$t("m.in.arrivaltype1")}}</span>
          <span v-if="scope.row.typeid==2">{{$t("m.in.arrivaltype2")}}</span>
          <span v-if="scope.row.typeid==3">{{$t("m.in.arrivaltype3")}}</span>
          <span v-if="scope.row.typeid==4">{{$t("m.in.other")}}</span>
        </template> -->
      </el-table-column>
      <el-table-column prop="creator" :label="$t('m.sigin.creator')" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="consignorname" :label="$t('m.in.consignor')" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createdate" :label="$t('m.sigin.createdate')" align="center">
        <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="currentChange"
      @size-change="handleSizeChange"
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
    ></el-pagination>
    <!-- table数据展示 end -->

    <!-- 理货单号dialog start -->
    <signingPopup
      :popupVisible="signingPopupVisible"
      :detail="popupData"
      @close="signingPopupVisible=false"
      @getData="getSigningResultData"
    ></signingPopup>
    <!-- 理货单号dialog end -->

    <!-- 查看理货结果dialog start -->
    <signingResultPopup
      v-if="signingResultPopupVisible"
      :popupVisible="signingResultPopupVisible"
      :detail="signingResultPopupData"
      @close="signingResultPopupVisible=false"
    ></signingResultPopup>
    <!-- 查看理货结果dialog end -->

    <!-- 通知单理货dialog start -->
    <signingNoticePopup
      v-if="signingNoticePopupVisible"
      :popupVisible="signingNoticePopupVisible"
      :noticenumber="activedNoticeNumber"
      :actualquantity="restAmount"
      @triggerSigning="handleTriggerSigning"
      @initActualquantity="restAmount = -1"
      @close="noticePopupClose"
    ></signingNoticePopup>
    <!-- 通知单理货dialog end -->

    <!-- 理货功能dialog start -->
    <signingAddPopup
      v-if="signingAddPopupVisible"
      :popupVisible="signingAddPopupVisible"
      :arrivalnoticeDetail="arrivalnoticeArg"
      @close="signingAddPopupVisible=false"
      @callback="succeedSaved"
    ></signingAddPopup>
    <!-- 理货功能dialog end -->
  </div>
</template>

<script>
import signingPopup from '@/components/signing/signing-popup'
import signingResultPopup from '@/components/signing/signing-result-popup'
import signingNoticePopup from '@/components/signing/signing-notice-popup'
import signingAddPopup from '@/components/signing/signing-add-popup'
export default {
  name:'signing',
  data(){
    return {
      siginForm:{
        noticenumber:'',
        ordernumber:'',
        productspeccode:'',
        signcode:'',
        suppliercode:'',
        suppliername:'',
        warehouseid:''
      },
      tableData:[],

      signingPopupVisible:false, // 控制理货单详情dialog显示隐藏
      popupData:{},

      signingResultPopupVisible:false, // 控制查看理货结果dialog显示隐藏
      signingResultPopupData:{},

      signingNoticePopupVisible:false, // 控制通知单理货dialog显示隐藏
      activedNoticeNumber:'',

      signingAddPopupVisible:false, // 控制理货功能dialog显示隐藏
      arrivalnoticeArg:{},
      restAmount:-1, // 剩余数量默认传-1，如果传0的话，做一单全部数量的理货，singningNotice的actualquantity watcher不会触发

      tableRowActived:'' // table当前选中项
    }
  },
  mounted(){
    this.getData()
  },
  components:{
    signingPopup,
    signingResultPopup,
    signingNoticePopup,
    signingAddPopup
  },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let options = {
        method:'get',
        url:'/signin/page',
        params:Object.assign({}, this.siginForm, {
          page:this.page,
          rows:this.rowSize
        })
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
        this.page = data.current
        if (!this.tableData.length)
          return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // 根据理货单号获取具体信息
    getSigningData(signid){
      let options = {
        method:'get',
        url:`/signin/getsigninbyid/${signid}`
      }
      this.$axios(options).then(({ data }) => {
        this.popupData = data
        this.signingPopupVisible = true
      })
    },
    // 根据通知单号直接激活 [notice-popup] 弹窗
    getNoticeData(noticenumber){
      this.activedNoticeNumber = noticenumber
      this.signingNoticePopupVisible = true
    },
    // 查询理货结果
    getSigningResultData(detailid){
      let options = {
        method:'get',
        url:`/signin/getdetail/${detailid}`
      }
      this.$axios(options).then(({ data }) => {
        this.signingResultPopupData = data
        this.signingResultPopupVisible = true
      })
    },
    handleTriggerSigning(arg){
      this.arrivalnoticeArg = arg
      this.signingAddPopupVisible = true
    },
    // 成功理货后执行回调函数，重置已到货数量
    succeedSaved(restAmount){
      this.restAmount = restAmount
    },
    // 关闭通知理货单dialog后，回调函数
    noticePopupClose(){
      this.signingNoticePopupVisible = false
      this.activedNoticeNumber = ''
      this.getData()
    }
  },
  beforeRouteLeave(to, form, next){
    this.signingNoticePopupVisible=false
    this.signingResultPopupVisible=false
    this.signingAddPopupVisible=false
    this.signingPopupVisible=false
    next()
  }
}
</script>